Vue Js Change Tab Active Color:To change the active color of a tab in Vue.js, you can use CSS classes and dynamic binding. First, define a CSS class for the desired active color. Then, in your Vue component, create a data property to track the active tab. Use the class binding syntax to conditionally apply the active color class based on the active tab state. Finally, add event handlers or methods to update the active tab when a tab is clicked. By dynamically applying the active color class, you can visually differentiate the active tab from the rest.

How to change tab colour on click in Vue Js?

In the given code snippet, a Vue.js application is created with a data object containing two properties: activeTab and tabs. The activeTab property represents the currently active tab, initially set to 'tab1'. The tabs property is an array of tab names (['tab1', 'tab2', 'tab3']).

In the template section, a <div> element with the id “app” is defined. Inside it, there is a <div> element with the class “tabs”. Within this element, a <button> element is created using the v-for directive to iterate over the tabs array. The :key binding ensures the uniqueness of each button.

The :class binding is used to dynamically apply the “active-tab” class if the current tab matches the activeTab value. The @click event listener updates the activeTab value when a button is clicked.

Vue Js Change Tab Active Color Example

<div id="app">
    <div class="tabs">
        <button v-for="tab in tabs" :key="tab" :class="[activeTab === tab ? 'active-tab' : '', 'tab-button']"
        @click="activeTab = tab">{{ tab }}</button>
    </div>
</div>
 <script type="module" >
    const app = Vue.createApp({
    data() {
        return {
            activeTab: 'tab1', // Assuming 'tab1' is the initially active tab
            tabs: ['tab1', 'tab2', 'tab3'], // Array of tab names
        };
    },
});
app.mount('#app');
</script>

Output of Vue Js Change Tab Active Color